<template>
    <f7-page>
    <f7-navbar title="导航条" back-link></f7-navbar>

      <div class="tien-bar bg-white solid-bottom margin-top-no ">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>默认
        </div>
      </div>

      <div scroll-x class="bg-white nav scroll-x" scroll-with-animation scroll-left="0">
        <div v-for="(index) in 10" :class=" index<2?'cur':'' " class="tien-item text-green " bindtap='tabSelect' :data-id="index">
          Tab{{index}}
        </div>
      </div>

      <div class="tien-bar bg-white margin-top solid-bottom">
        <div class='action'>
          <span class='tien-icon-title text-orange'></span> 居中
        </div>
      </div>
      <div scroll-x class="bg-white scroll-x nav text-center">
        <div v-for="(index) in 10"  class="tien-item text-blue cur" bindtap='tabSelect' :data-id="index">
          Tab{{index}}
        </div>
      </div>

      <div class="tien-bar bg-white margin-top solid-bottom">
        <div class='action'>
          <span class='tien-icon-title text-orange'></span> 平分
        </div>
      </div>
      <div scroll-x class="bg-white nav">
        <div class='flex text-center'>
          <div v-for="(index) in 4"  class="tien-item flex-sub text-orange cur" bindtap='tabSelect' :data-id="index">
            Tab{{index}}
          </div>
        </div>
      </div>
      <div class="tien-bar bg-white margin-top solid-bottom">
        <div class='action'>
          <span class='tien-icon-title text-orange'></span> 背景
        </div>
      </div>
      <div scroll-x class="bg-red nav text-center">
        <div v-for="(index) in 3" class="tien-item text-white cur" bindtap='tabSelect' :data-id="index">
          Tab{{index}}
        </div>
      </div>
      <div class="tien-bar bg-white margin-top solid-bottom">
        <div class='action'>
          <span class='tien-icon-title text-orange'></span> 图标
        </div>
      </div>
      <div scroll-x class="bg-green nav text-center">
        
        <div class="tien-item text-white cur" bindtap='tabSelect' data-id="0">
          <span class='tien-icon-camerafill'></span> 数码
        </div>
        <div class="tien-item " bindtap='tabSelect' data-id="1">
          <span class='tien-icon-upstagefill'></span> 排行榜
        </div>
        <div class="tien-item " bindtap='tabSelect' data-id="2">
          <span class='tien-icon-clothesfill'></span> 皮肤
        </div>
      </div>

  </f7-page>
</template>

<script>
export default {
  name:'nav',
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

